<template>
	<jf-navigation>
		<view>{{$t('login.basics.navigation')}}</view>
		<template #right>
			<view class="basics_jump" @click="jump()">{{$t('login.basics.jump')}}</view>
		</template>
	</jf-navigation>
	
	<view class="basics_header" @click="selImage()">
		<image src="@/static/images/common/header_icon.png" mode="aspectFill" class="basics_header_url" v-if="!form.avatar"></image>
		<image :src="form.avatar" mode="aspectFill" class="basics_header_url" v-else></image>
		<image src="@/static/images/common/header_add.png" class="basics_header_icon"></image>
	</view>
	
	<jf-input :label="$t('login.basics.nickname')" :placeholder="$t('login.basics.placeholderNickname')" :disabled="data.loading" v-model="form.nickname" :maxlength="10" limit></jf-input>
	<jf-input :label="$t('login.basics.birthday')" :placeholder="$t('login.basics.placeholderBirthday')" :disabled="data.loading" mode="selector" v-model="form.birthday" @click="data.showBirthday = true"></jf-input>
	<jf-input :label="$t('login.basics.sex')" mode="none"></jf-input>
	<view class="basics_sexs">
		<view class="basics_sex" v-for="(item,index) in data.sexs" :key="index" @click="selSex(item.value)" :class="{'active': form.sex === item.value}">
			<image :src="form.sex === item.value ? item.active : item.unActive"></image>
			<view>{{$t(item.key)}}</view>
		</view>
	</view>
	
	<view class="form_submit">
		<zq-button-ts :loading="data.loading" @click="submit()">{{$t('login.basics.submit')}}</zq-button-ts>
	</view>
	
	<jf-picker mode="date" v-model:show="data.showBirthday" v-model="form.birthday" :title="$t('login.basics.pickerBirthday')" :confirmText="$t('common.operate.confirm')" :cancelText="$t('common.operate.cancel')" :units="[$t('common.date.year'), $t('common.date.month'), $t('common.date.date')]"></jf-picker>
</template>

<script lang="ts" setup>
	import { reactive, getCurrentInstance, onMounted } from 'vue';
	import icon001 from "@/static/images/login/basics_icon001_on.png"
	import icon002 from "@/static/images/login/basics_icon002_on.png"
	import icon003 from "@/static/images/login/basics_icon003_on.png"
	import unicon001 from "@/static/images/login/basics_icon001.png"
	import unicon002 from "@/static/images/login/basics_icon002.png"
	import unicon003 from "@/static/images/login/basics_icon003.png"
	import Route from "@/static/utils/Route"
	import { useStore } from "@/store/main"
	import { upload } from "@/api/common"
	import { saveUserinfo } from "@/api/login"
	
	const store = useStore()
	const { proxy } = getCurrentInstance()
	const router = new Route();
	const data = reactive({
		loading: false,
		showBirthday: false,
		sexs: [
			{ active: icon001, unActive: unicon001, key: 'common.sex.man',value: 1 },
			{ active: icon002, unActive: unicon002, key: 'common.sex.woman',value: 2 },
			{ active: icon003, unActive: unicon003, key: 'common.sex.other',value: 0 }
		]
	})
	const form = reactive({
		avatar: undefined,
		nickname: undefined,
		birthday: undefined,
		sex: undefined,
		is_basic: 1
	})
	
	const selImage = ():void => {
		uni.chooseImage({
			count: 1,
			success: (result:any) => {
				upload(
					result.tempFiles
				).then((res:any):void => {
					form.avatar = res[0].url
				})
			}
		})
	}
	const jump = ():void =>{
		saveUserinfo({is_basic: 1})
		router.redirect({
			url: "/pages/index/index",
			disabled: data.loading
		})
	}
	const selSex = ( value:number ):void =>{
		if(data.loading) return
		form.sex = value
	}
	const submit = ():void =>{
		data.loading = true;
		saveUserinfo(form).then((res:any):void => {
			store.setUserinfo(res.data)
			router.redirect({
				url: "/pages/index/index",
				delay: 1000,
				message: proxy.$t("common.submit.success"),
				messageIcon: 'success'
			})
		}).catch(():void => {
			uni.showToast({
				title: proxy.$t("common.submit.fail"),
				icon: "none"
			})
		})
	}
</script>

<style lang="scss">
	.basics_jump{
		font-size: 28rpx;
		color: var(--color-primary);
		font-weight: 400;
	}
	.basics_header{
		position: relative;
		width: 188rpx;
		height: 188rpx;
		margin: 80rpx 0 90rpx 280rpx;
		.basics_header_url{
			width: 188rpx;
			height: 188rpx;
			border-radius: 94rpx;
		}
		.basics_header_icon{
			position: absolute;
			left: 62rpx;
			bottom: -32rpx;
			width: 64rpx;
			height: 64rpx;
		}
	}
	.basics_sexs{
		width: 100%;
		display: flex;
		flex-direction: row;
		box-sizing: border-box;
		padding-left: 48rpx;
		.basics_sex{
			width: 200rpx;
			height: 96rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
			color: #9099B0;
			font-weight: 400;
			border: 2rpx solid #DBDFE3;
			border-radius: 16rpx;
			padding: 0 32rpx;
			box-sizing: border-box;
			margin-right: 24rpx;
			image{
				width: 44rpx;
				height: 44rpx;
			}
			&.active{
				border-color: none;
				background: var(--background);
				color: #ffffff;
			}
		}
	}
</style>